<template>
  <div class="box">
    <div class="box_title flex">
      <div class="box_title_lf flex" @click="searchDateClick(1)">
        <div class="title_time_lf">{{Query.startStr}}</div>
        <!-- <div class="title_time_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>-->
      </div>
      <div class="box_title_lr flex" @click="searchDateClick(2)">
        <div class="title_time_lf">{{Query.endStr}}</div>
        <!-- <div class="title_time_lr">
          <i class="icon iconfont icon-bianji"></i>
        </div>-->
      </div>
      <div class="box_title_search" @click="searchCLick">
        <div>查询</div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div id="main_map"></div>
        <div class="main_map_copy">
          <div class="box_main_gross">
            <div class="box_main_gross_main">
              <div class="box_main_gross_main_num overflowEllipsis">{{total}}</div>
              <div class="box_main_gross_main_txt">总量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box_main_list">
        <ul class="box_main_listUl">
          <li class="box_main_list_item flex" v-for="(e,i) in yLists" :key="i">
            <div :style="{'background-color': e.color}" class="box_main_list_item_type"></div>
            <div class="box_main_list_item_txt">{{e.name}} {{e.value}}个</div>
          </li>
        </ul>
      </div>
    </div>
    <!--选择时间弹出框-->
    <dateModel @message="canifmDateClick" @cancel="cancelDateClick" :time="timeVal" :dataState="dataStateVal"></dateModel>
  </div>
</template>
<script>
  let echarts = require("echarts");
  import taskApi from "../../requestApi/taskApi";
  import dateModel from "../../components/Module/dateModel";
  import {
    Toast
  } from "mint-ui";
  export default {
    components: {
      dateModel
    },
    data() {
      return {
        Query: {
          startStr: "请选择",
          endStr: "请选择",
          startTime: "请选择",
          endTime: "请选择",
          community: "",
          grid: "",
          street: ""
        },
        total: 0,
        // 日期
        timeIndex: 1,
        dataStateVal: false,
        timeVal: "请选择",
        xLists: ["#FE6E39", "#F6991B", "#639FC9", "#C5DB49"],
        yLists: [{
            name: "正常项目",
            id: "0",
            value: "0",
            color: "#FE6E39"
          },
          {
            name: "延期项目",
            id: "1",
            value: "0",
            color: "#F6991B"
          },
          {
            name: "预警项目",
            id: "2",
            value: "0",
            color: "#639FC9"
          },
          {
            name: "完结项目",
            id: "3",
            value: "0",
            color: "#C5DB49"
          }
        ]
      };
    },
    created: function () {},
    mounted() {
      let self = this;
      // let u = navigator.userAgent;
      // let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      // if (isAndroid) {
      //   if (window.BenchJSInterface) {
      //     if (window.BenchJSInterface.setRightImage) {
      //       // 0 不设置右上角  1 选择年  2 选择组织机构
      //       // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
      //       // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
      //       let obj = {
      //         clickType: 2,
      //         type: 0,
      //         chooseType: 0
      //       };
      //       window.BenchJSInterface.setRightImage(
      //         JSON.stringify(obj),
      //         `javascript:window.getAppRightxiangmutongji(->path<-);`
      //       );
      //     }
      //   }
      // }
      if (window.BenchJSInterface) {
        if (window.BenchJSInterface.setRightImage) {
          // 0 不设置右上角  1 选择年  2 选择组织机构
          // * type 0:只显示宝塔区 1：只显示街道 2：只显示社区 3：只显示网格
          // * chooseType  0：只能选择宝塔区 1只能选择街道  2.只能选择社区 3.只能选择网格
          let obj = {
            clickType: 2,
            type: 0,
            chooseType: 0
          };
          window.BenchJSInterface.setRightImage(
            JSON.stringify(obj),
            `javascript:window.getAppRightxiangmutongji(->path<-);`
          );
        }
      }
      window.getAppRightxiangmutongji = function (val) {
        if (val.orgType == 1) {
          self.Query.street = val.orgId;
          self.Query.community = "";
          self.Query.grid = "";
        } else if (val.orgType == 2) {
          self.Query.community = val.orgId;
          self.Query.street = "";
          self.Query.grid = "";
        } else if (val.orgType == 3) {
          self.Query.grid = val.orgId;
          self.Query.community = "";
          self.Query.street = "";
        } else {
          self.Query.grid = "";
          self.Query.community = "";
          self.Query.street = "";
        }
        self.listFun();
      };
      self.baseUserMessageDistributeFun();
      window.getAppgetUserToken = function (val) {
        self.baseUserInfoFun(val);
        self.listFun();
      };
      self.listFun();
      this.titleFun({
        title: "项目统计"
      });
    },
    methods: {
      searchCLick() {
        let self = this;
        self.total = 0
        this.listFun();
      },
      searchDateClick(i) {
        this.dataStateVal = true;
        this.timeIndex = i;
      },
      canifmDateClick(val) {
        let value = this.baseDateFun(val);
        let temp = new Date(val).getTime();
        if (this.timeIndex == 1) {
          this.Query.startStr = value;
          this.Query.startTime = temp;
        } else {
          this.Query.endStr = value;
          this.Query.endTime = temp;
        }
        this.dataStateVal = false;
        this.listFun();
      },
      cancelDateClick() {
        this.dataStateVal = false;
      },
      mapListsFun() {
        let self = this;
        let eComVisitChart = echarts.init(document.getElementById("main_map"));
        eComVisitChart.setOption({
          series: [{
            type: "pie",
            radius: [48, 119],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 100,
                  fontSize: 12
                },
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            silent: true,
            color: self.xLists,
            data: self.yLists
          }]
        });
      },
      async listFun() {
        let self = this;
        if (this.Query.startTime == "请选择") {
          delete this.Query.startTime;
        }
        if (this.Query.endTime == "请选择") {
          delete this.Query.endTime;
        }
        let params = {
          ...this.Query
        };
        let res = await taskApi.GetApistatisticsprojectstatistics(params);
        if (res.statusCode == 200) {
          if (res.data) {
            let data = res.data;
            self.yLists.forEach(e => {
              for (let k in data) {
                if (e.id == k) {
                  e.value = data[k];
                }
              }
            });
            self.yLists.forEach(e => {
              self.total += e.value * 1;
            });
          } else {
            self.yLists = [{
                name: "正常项目",
                id: "0",
                value: "0",
                color: "#FE6E39"
              },
              {
                name: "延期项目",
                id: "1",
                value: "0",
                color: "#F6991B"
              },
              {
                name: "预警项目",
                id: "2",
                value: "0",
                color: "#639FC9"
              },
              {
                name: "完结项目",
                id: "3",
                value: "0",
                color: "#C5DB49"
              }
            ];
          }

          this.mapListsFun();
        } else {
          self.yLists = [{
              name: "正常项目",
              id: "0",
              value: "0",
              color: "#FE6E39"
            },
            {
              name: "延期项目",
              id: "1",
              value: "0",
              color: "#F6991B"
            },
            {
              name: "预警项目",
              id: "2",
              value: "0",
              color: "#639FC9"
            },
            {
              name: "完结项目",
              id: "3",
              value: "0",
              color: "#C5DB49"
            }
          ];
          this.mapListsFun();
          Toast({
            message: res.statusMessage,
            position: "bottom"
          });
        }
      }
    },
    filters: {},
    watch: {},
    computed: {}
  };

</script>
<style scoped>
  /* 时间筛选 */
  .title_time_lf {
    width: 3.12rem;
    height: 0.72rem;
    line-height: 0.72rem;
    padding-left: 0.32rem;
    font-size: 0.4rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(91, 98, 109, 1);
  }

  .box_title_search {
    width: 1.44rem;
    font-size: 0.3733rem;
    color: #fff;
    line-height: 0.72rem;
    text-align: center;
    height: 0.72rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.0533rem;
    background-color: #e7383e;
    margin-top: 0.32rem;
    margin-left: 0.32rem;
  }

  .title_time_lr {
    width: 0.9333rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .title_time_lr::after {
    position: absolute;
    left: 0rem;
    width: 0.0267rem;
    height: 0.5067rem;
    background: rgba(120, 120, 120, 0.32);
    top: 0.1067rem;
    content: "";
  }

  .title_time_lr i {
    color: #8c96a6;
    font-size: 0.3467rem;
  }

  .box_title_lf {
    width: 3.0133rem;
    height: 0.72rem;
    background: rgba(248, 248, 248, 1);
    border-radius: 0.0533rem;
    margin-left: 0.7733rem;
    margin-top: 0.32rem;
  }

  .box_title_lr::after {
    position: absolute;
    left: -0.5867rem;
    width: 0.3467rem;
    height: 0.0267rem;
    background: rgba(235, 46, 51, 1);
    top: 0.2933rem;
    content: "";
  }

  .box_title_lr {
    width: 3.0133rem;
    height: 0.72rem;
    background: rgba(248, 248, 248, 1);
    border-radius: 0.0533rem;
    margin-left: 0.88rem;
    margin-top: 0.32rem;
    position: relative;
  }

  .box_title {
    width: 100%;
    height: 1.3333rem;
    background: rgba(255, 255, 255, 1);
    margin-top: 0.1867rem;
  }

  /* 时间筛选 */
  .box_main_list_item_type {
    width: 0.2133rem;
    height: 0.2133rem;
    background: rgba(254, 110, 57, 1);
    border-radius: 50%;
    margin-top: 0.08rem;
    margin-right: 0.32rem;
  }

  .box_main_list_item_txt {
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item {
    width: 3.7333rem;
    height: 0.4rem;
    margin-left: 0.6667rem;
    line-height: 0.4rem;
    font-size: 0.3733rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(82, 99, 111, 1);
  }

  .box_main_list_item:nth-child(2),
  .box_main_list_item:nth-child(4) {
    margin-left: 1.3333rem;
  }

  .box_main_list_item:nth-child(3),
  .box_main_list_item:nth-child(4) {
    margin-top: 0.4rem;
  }

  .box_main_listUl {
    display: flex;
    flex-wrap: wrap;
  }

  .box_main_list {
    height: 1.2rem;
    width: 100%;
    margin-top: 0.1333rem;
  }

  /* 图表 */
  .box_main_gross_main_txt {
    font-size: 0.48rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(102, 102, 102, 1);
    width: 100%;
    text-align: center;
  }

  .box_main_gross_main_num {
    font-size: 0.9867rem;
    font-family: CenturyGothic-Bold;
    font-weight: bold;
    color: rgba(255, 95, 24, 1);
    height: 1.0667rem;
    line-height: 1.0667rem;
    text-align: center;
    margin-top: 0.3733rem;
  }

  .box_main_gross_main {
    width: 86px;
    height: 86px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 50%;
  }

  .box_main_gross {
    width: 97px;
    height: 97px;
    border-radius: 50%;
    z-index: 1001;
    background-color: #e3eef5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #main_map {
    width: 242px;
    height: 242px;
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: calc(50vw - 121px);
  }

  .main_map_copy {
    width: 242px;
    height: 242px;
    overflow: hidden;
    position: absolute;
    top: 48px;
    left: calc(50vw - 121px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box_main_echarts {
    width: 100%;
    height: 325px;
    overflow: hidden;
    position: relative;
  }

  /* 图表 */
  .box_main_bd {
    width: 100%;
    height: calc(100vh - 1.7333rem);
    background: rgba(255, 255, 255, 1);
    margin-top: 0.1867rem;
    overflow: hidden;
  }

  .box {
    background: #f6f6f6;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

</style>
